<template>
  <div class="layout">
    <Topnav class="nav"/>
    <div class="content">
      <aside v-show="asideVisible">
        <h3>介绍</h3>
        <ol>
          <li>
            <router-link to="/doc">DropUI</router-link>
          </li>
        </ol>
        <h3>入门</h3>
        <ol>
          <li>
            <router-link to="/doc/switch">安装</router-link>
          </li>
          <li>
            <router-link to="/doc/switch">快速上手</router-link>
          </li>
        </ol>

        <h3>组件</h3>
        <ol>
          <li>
            <router-link to="/doc/switch">Switch 组件</router-link>
          </li>
          <li>
            <router-link to="/doc/button">Button 组件</router-link>
          </li>
          <li>
            <router-link to="/doc/dialog">Dialog 组件</router-link>
          </li>
          <li>
            <router-link to="/doc/tabs">Tabs组件</router-link>
          </li>
        </ol>
      </aside>
      <main>
        <router-view></router-view>
      </main>
    </div>
  </div>
</template>
<script lang="ts">
  import Topnav from "../components/Topnav.vue"
  import {inject, Ref} from 'vue'

  export default {
    components:{Topnav},
    setup() {
      const asideVisible = inject<Ref<boolean>>('asideVisible'); //get
      return {asideVisible}
    }
  }
</script>
<style lang="scss" scoped>
  .layout{
    display: flex;
    flex-direction: column;
    height: 100vh;
    > .nav {
      flex-shrink: 0;
      z-index: 11;
    }
    > .content {
      flex-grow: 1;
      padding-top: 60px;
      padding-left: 240px;
      display: flex;
      > aside {
        flex-shrink: 0;
      }
      > main {
        flex-grow: 1;
        padding: 16px;
        overflow: auto;
      }
      @media (max-width: 500px) {
        padding-left: 0;
      }
    }
  }
  aside {
    width: 220px;
    padding: 70px 16px 0 16px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    border-right: 1px solid #f0f6fd;
    > h3 {
      padding:15px 17px 2px;
      text-align: left;
      font-weight: 600;
      font-size: 16px;
    }

    > ol {
      > li {
        padding: 0 17px;
        text-align: left;
        font-size: 14px;
      }
    }
  }
  main {
    overflow: auto;
  }
</style>